<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>vue笔记本 | 孙志豪的博客</title><meta name="author" content="孙志豪"><meta name="copyright" content="孙志豪"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="*Welcome to *vue0.1.vue生命周期beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。 created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Do">
<meta property="og:type" content="article">
<meta property="og:title" content="vue笔记本">
<meta property="og:url" content="https://szhihao.gitee.io/2022/10/11/14-%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%EF%BC%88Vue%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/VUE%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%9A%84%E5%89%AF%E6%9C%AC/index.html">
<meta property="og:site_name" content="孙志豪的博客">
<meta property="og:description" content="*Welcome to *vue0.1.vue生命周期beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。 created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Do">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://szhihao.gitee.io/img/%E5%A4%A9%E7%A9%BA.jpeg">
<meta property="article:published_time" content="2022-10-11T12:01:36.000Z">
<meta property="article:modified_time" content="2022-10-12T02:42:12.844Z">
<meta property="article:author" content="孙志豪">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://szhihao.gitee.io/img/%E5%A4%A9%E7%A9%BA.jpeg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://szhihao.gitee.io/2022/10/11/14-%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%EF%BC%88Vue%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/VUE%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%9A%84%E5%89%AF%E6%9C%AC/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","languages":{"hits_empty":"We didn't find any results for the search: ${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: 'Copy successfully',
    error: 'Copy error',
    noSupport: 'The browser does not support'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: 'Just',
    min: 'minutes ago',
    hour: 'hours ago',
    day: 'days ago',
    month: 'months ago'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'vue笔记本',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-10-12 10:42:12'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/img/%E5%A4%B4%E5%83%8F.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">44</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">15</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/img/%E5%A4%A9%E7%A9%BA.jpeg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">孙志豪的博客</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> Search</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">vue笔记本</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">Created</span><time class="post-meta-date-created" datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2022-10-12T02:42:12.844Z" title="Updated 2022-10-12 10:42:12">2022-10-12</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%EF%BC%88Vue%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/">前端框架（Vue面试题）</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="vue笔记本"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">Post View:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><hr>
<h1 id="Welcome-to-vue"><a href="#Welcome-to-vue" class="headerlink" title="*Welcome to *vue"></a>*<a href="javascript:;">Welcome</a> <a href="javascript:;">to </a>*vue</h1><h5 id="0-1-vue生命周期"><a href="#0-1-vue生命周期" class="headerlink" title="0.1.vue生命周期"></a>0.1.vue生命周期</h5><p>beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。</p>
<p>created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。</p>
<p>beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。</p>
<p>mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。</p>
<p>beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。</p>
<p>updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。</p>
<p>beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。</p>
<p>destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。</p>
<h5 id="1、组件传参"><a href="#1、组件传参" class="headerlink" title="1、组件传参"></a>1、组件传参</h5><p>1、props适用于：</p>
<p>​              （1）、父组件&#x3D;&#x3D;&gt; 子组件 通信</p>
<p>​               （2）、子组件&#x3D;&#x3D;&gt; 父组件 通信 （要求父组件先给子组件一个函数）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 父组件写法  </span></span><br><span class="line">&lt;sunFooter <span class="comment">// 绑定事件发给 sunFooter 组件 如果里面还套了一个组件那么还的注册一次</span></span><br><span class="line">        :removeTrue=<span class="string">&quot;removeTrue&quot;</span></span><br><span class="line"> /&gt;</span><br><span class="line"> </span><br><span class="line"><span class="attr">methods</span>: &#123;  <span class="comment">// 钩子函数</span></span><br><span class="line"><span class="title function_">removeTodo</span>(<span class="params">item</span>) &#123;  <span class="comment">// 删除的逻辑</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">obj</span> = <span class="variable language_">this</span>.<span class="property">obj</span>.<span class="title function_">filter</span>(<span class="function">(<span class="params">elment</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> elment.<span class="property">id</span> !== item.<span class="property">id</span>;</span><br><span class="line">      &#125;);</span><br><span class="line"> &#125;,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 子组件的写法、自点击事件 传给父亲 父亲来写逻辑 前提父亲要传入一个函数</span></span><br><span class="line"><span class="attr">props</span>: [<span class="string">&quot;removeTodo&quot;</span>],  <span class="comment">// rorps来接收传过来的数据</span></span><br><span class="line"><span class="attr">methods</span>: &#123;  <span class="comment">// 钩子函数</span></span><br><span class="line"><span class="title function_">removeBtn</span>(<span class="params">item</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (<span class="title function_">confirm</span>(<span class="string">&quot;确认删除吗&quot;</span>)) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">removeTodo</span>(item);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>2、使用v-model时要切记：v-model绑定的值不能是props传过来的值、因为props是不可以修改的。</p>
<p>3、props传过来的若是对象类型的值、修改对象中的属性时Vue不会报错，但不推荐这样做。</p>
<p>4、实现动态组件：考虑好数据存放的位置，数据是一个组件再用，还是一些组件再用，</p>
<p>​                     （1）一个组件再用：放在组件自身即可</p>
<p>​                     （2）一些组件再用：放在他们共同的父组件上（状态提升）</p>
<p>​                     （3）实现交互：从绑定事件开始</p>
<h5 id="2、watch-本地存储"><a href="#2、watch-本地存储" class="headerlink" title="2、watch  本地存储"></a>2、watch  本地存储</h5><p> 1、  watch 监视  用来检测数据的变化 数据发生变化 触发watch </p>
<p>2、vue中的watch默认不监测对象内部值得改变（一层）</p>
<p>3、配置deep：true 可以检测对象内部的值改变（多层)</p>
<p>4、Vue自身可以检测对象内部的值变化，单vue提供的watch默认不可以</p>
<p>5、使用watch时根据数据的具体结构，决定是否采用深度监视.</p>
<p>6、immediate：true 立即监听，初始化上来就监听</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">obj</span>: <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&quot;todo&quot;</span>)) || [], <span class="comment">//  用来初始本地数据</span></span><br><span class="line"><span class="attr">watch</span>: &#123;</span><br><span class="line">    <span class="attr">obj</span>: &#123;</span><br><span class="line">      <span class="attr">deep</span>: <span class="literal">true</span>, <span class="comment">// 开启深度监视 不然只是检测数组 不会监测里面的对象</span></span><br><span class="line">      <span class="title function_">handler</span>(<span class="params">value</span>) &#123;  <span class="comment">// 这里用一个handler 有一个参数 其实是检测obj的参数</span></span><br><span class="line">        <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&quot;todo&quot;</span>, <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(value));    <span class="comment">// 将数据存储到本地                  </span></span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  </span><br><span class="line">  <span class="attr">watch</span>: &#123;  <span class="comment">// watch写的查找数据</span></span><br><span class="line">      <span class="comment">// 监视数据</span></span><br><span class="line">      <span class="attr">search</span>: &#123;</span><br><span class="line">        <span class="attr">immediate</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="title function_">handler</span>(<span class="params">val</span>) &#123;</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">newobj</span> = <span class="variable language_">this</span>.<span class="property">obj</span>.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">name</span>.<span class="title function_">indexOf</span>(val) !== -<span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>

<h5 id="4、全局事件总线"><a href="#4、全局事件总线" class="headerlink" title="4、全局事件总线"></a>4、全局事件总线</h5><p>1、一种组件通信的方式、<strong>适用于任意组件间通信</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;  <span class="comment">//  安装全局事件总线</span></span><br><span class="line"><span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line"><span class="title function_">beforeCreate</span>(<span class="params"></span>) &#123;    <span class="comment">//  写到min.js里面 安装全局事件总线</span></span><br><span class="line">  <span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$bus</span> = <span class="variable language_">this</span></span><br><span class="line">&#125;</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"> </span><br><span class="line">  <span class="comment">//子组件把数据传给父组件</span></span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">  <span class="title function_">removeTodo</span>(<span class="params">item</span>) &#123; <span class="comment">//APP里面  这个是删除的逻辑 （1）</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">obj</span> = <span class="variable language_">this</span>.<span class="property">obj</span>.<span class="title function_">filter</span>(<span class="function">(<span class="params">elment</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> elment.<span class="property">id</span> !== item;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line">  </span><br><span class="line">  </span><br><span class="line">  <span class="title function_">mounted</span>(<span class="params"></span>) &#123;  <span class="comment">// APP 这是父组件要注册 绑定 （2）</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">$bus</span>.$on(<span class="string">&#x27;removeTodo&#x27;</span>,<span class="variable language_">this</span>.<span class="property">removeTodo</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">beforeDestroy</span>(<span class="params"></span>)&#123; <span class="comment">//最好beforeDestroy钩子中却解绑事件  在运行完销毁 </span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">$bus</span>.$off(<span class="string">&#x27;removeTodo&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line">   <span class="title function_">removeBtn</span>(<span class="params">item</span>) &#123;  <span class="comment">// 删除按钮 这是子组件 （3）</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="title function_">confirm</span>(<span class="string">&quot;确认删除吗&quot;</span>)) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">$bus</span>.$emit(<span class="string">&#x27;removeTodo&#x27;</span>,item) <span class="comment">// 子组件找到 $bus 把数据传过去</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>



<h5 id="5、消息订阅与发布"><a href="#5、消息订阅与发布" class="headerlink" title="5、消息订阅与发布"></a>5、消息订阅与发布</h5><p>1、安装 npm i pubsub-js</p>
<p>2、 引入  import pubsub from “pubsub -js”</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> pubsub <span class="keyword">from</span> <span class="string">&quot;pubsub -js&quot;</span> <span class="comment">// 引入</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">newObj</span>(<span class="params">_,x</span>) &#123;  <span class="comment">// _站位 应为 传入的是两个参数 这里写逻辑 1、 父组件</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">obj</span>.<span class="title function_">unshift</span>(x);</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title function_">mounted</span>(<span class="params"></span>)&#123; <span class="comment">// 订阅消息 </span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">pubId</span> =  pubsub.<span class="title function_">subscribe</span>(<span class="string">&#x27;newObj&#x27;</span>,<span class="variable language_">this</span>.<span class="property">newObj</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">beforeDestroy</span>(<span class="params"></span>)&#123; <span class="comment">// 解绑这个事件</span></span><br><span class="line">    pubsub.<span class="title function_">unsubscribe</span>(<span class="variable language_">this</span>.<span class="property">pubId</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="title function_">addBtn</span>(<span class="params">e</span>) &#123;  <span class="comment">// 发布消息  2、子组件</span></span><br><span class="line">      pubsub.<span class="title function_">publish</span>(<span class="string">&#x27;newObj&#x27;</span>,addObj)</span><br><span class="line">&#125;,</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="6、nextTick"><a href="#6、nextTick" class="headerlink" title="6、nextTick"></a>6、nextTick</h5><p>1、语法 this.$enwtTick(回调函数)</p>
<p>2、作用：在下一次DOM更新结束后执行其指定的回调函数</p>
<p>3、什么时候用：当数据改变后、要基于更新后的新DOM进行某些操作时，要nextTick所指定的的回调函数中执行。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;input</span><br><span class="line">  type=<span class="string">&quot;text</span></span><br><span class="line"><span class="string"> ref=&quot;</span>inpuAutofocus<span class="string">&quot;</span></span><br><span class="line"><span class="string">  /&gt;</span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">this.$nextTick(function()&#123; // 获取焦点 input必须加上  ref=&quot;</span>inpuAutofocus<span class="string">&quot;</span></span><br><span class="line"><span class="string">    this.$refs.inpuAutofocus.focus()</span></span><br><span class="line"><span class="string"> $nextTick 在下一次dom更新结束后执行气指定的回调</span></span><br><span class="line"><span class="string">  &#125;)</span></span><br></pre></td></tr></table></figure>

<h5 id="7、VUEX"><a href="#7、VUEX" class="headerlink" title="7、VUEX"></a>7、VUEX</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line">npm i vue-resource <span class="comment">// 发ajax 的库</span></span><br><span class="line">npm i vuex  <span class="comment">// 安装 </span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> resource <span class="keyword">from</span> <span class="string">&#x27;vue-resource&#x27;</span></span><br><span class="line"><span class="keyword">import</span> vuex <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(resource)</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(vuex)</span><br><span class="line"></span><br><span class="line">在src中创建一个store 文件中创一个 index.<span class="property">js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 改文件用于创建Vuex中最为核心的store</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>  <span class="comment">// 这里必须要有vue 作用域原因</span></span><br><span class="line"><span class="keyword">import</span> vuex <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(vuex)</span><br><span class="line"><span class="comment">// 准备actions 用于响应组件中的动作</span></span><br><span class="line"><span class="keyword">const</span> actions = &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 准备mutations- 用于响应组件中的动作</span></span><br><span class="line"><span class="keyword">const</span> mutations = &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 准备state 用于存储数据</span></span><br><span class="line"><span class="keyword">const</span> state = &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建并暴露store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> vuex.<span class="title class_">Store</span>(&#123;</span><br><span class="line">    actions,</span><br><span class="line">    mutations,</span><br><span class="line">    state,</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// min.js文件里面</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span></span><br><span class="line"><span class="keyword">import</span> resource <span class="keyword">from</span> <span class="string">&#x27;vue-resource&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store/index&#x27;</span> <span class="comment">// 引入store文件</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(resource)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line">  store,</span><br><span class="line">  <span class="title function_">beforeCreate</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$bus</span> = <span class="variable language_">this</span> <span class="comment">// 全局事件总线</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(vm);</span><br><span class="line"></span><br><span class="line"><span class="comment">//第一步</span></span><br><span class="line"></span><br><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">    <span class="title function_">jiaBtn</span>(<span class="params"></span>)&#123; <span class="comment">// 这里dispatch 一下this.n数据</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">&#x27;jia&#x27;</span>,<span class="variable language_">this</span>.<span class="property">n</span>) <span class="comment">// 这边就要 dispatch 变成commit</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,  <span class="comment">// 这是在app 子组件里写的</span></span><br><span class="line">  </span><br><span class="line">  <span class="comment">//第二步</span></span><br><span class="line">  <span class="keyword">const</span> actions = &#123; <span class="comment">// 用于响应组件中的动作</span></span><br><span class="line">    <span class="title function_">jia</span>(<span class="params">context, value</span>) &#123;</span><br><span class="line">        context.<span class="title function_">commit</span>(<span class="string">&#x27;JIA&#x27;</span>,value) </span><br><span class="line">        <span class="comment">// 这里如果不想写响应没逻辑的东西直接报给 mutations 删除// 上边就要 dispatch 变成commit</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">  <span class="comment">//第三步</span></span><br><span class="line">  <span class="keyword">const</span> mutations = &#123; <span class="comment">// 用于响应组件中的动作写逻辑的</span></span><br><span class="line">    <span class="title function_">JIA</span>(<span class="params">a,b</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b);</span><br><span class="line">        state.<span class="property">sum</span> += b </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> 第四步</span><br><span class="line"> <span class="comment">// 准备state 用于存储数据</span></span><br><span class="line"><span class="keyword">const</span> state = &#123;</span><br><span class="line">    <span class="attr">sum</span>: <span class="number">0</span>, <span class="comment">// 当前的和</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getters = &#123; <span class="comment">// 用于将state里面的数据进行加工</span></span><br><span class="line">   <span class="keyword">return</span> state.<span class="property">sum</span> * <span class="number">10</span> <span class="comment">// 当前的和  拿数据找这个$store.getters.bigSum</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//第五步 创建并暴露store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> vuex.<span class="title class_">Store</span>(&#123;</span><br><span class="line">    actions,</span><br><span class="line">    mutations,</span><br><span class="line">    state,</span><br><span class="line">    getters,</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="7、mapGetters、mapState、mapMutations、mapActions"><a href="#7、mapGetters、mapState、mapMutations、mapActions" class="headerlink" title="7、mapGetters、mapState、mapMutations、mapActions"></a>7、mapGetters、mapState、mapMutations、mapActions</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapActions, mapGetters, mapMutations, mapState &#125; <span class="keyword">from</span> <span class="string">&quot;vuex&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 用于app 组件子组件里</span></span><br><span class="line"></span><br><span class="line"><span class="number">1</span>、 计算属性简写</span><br><span class="line"><span class="attr">computed</span>: &#123; </span><br><span class="line">    <span class="comment">// zonSum() &#123;</span></span><br><span class="line">    <span class="comment">//   return this.$store.state.sum;</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line">    <span class="comment">// das() &#123;</span></span><br><span class="line">    <span class="comment">//   return this.$store.getters.bigSum; // 擦传统写法</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line"></span><br><span class="line">    ...<span class="title function_">mapState</span>(&#123; <span class="attr">zonSum</span>: <span class="string">&quot;sum&quot;</span> &#125;), <span class="comment">// 借助mapState 写法 可以讲 state 进行简写</span></span><br><span class="line">    ...<span class="title function_">mapGetters</span>(&#123; <span class="attr">das</span>: <span class="string">&quot;bigSum&quot;</span> &#125;), <span class="comment">// 借助mapGetters 写法 可以讲 getters 进行简写</span></span><br><span class="line">    </span><br><span class="line">  </span><br><span class="line"></span><br><span class="line">    ...<span class="title function_">mapState</span>([<span class="string">&#x27;sum&#x27;</span>]), <span class="comment">//如果向更简写 名字必须一样</span></span><br><span class="line">  &#125;,</span><br><span class="line">  </span><br><span class="line">  <span class="number">2</span>、方法简写</span><br><span class="line">    <span class="attr">methods</span>: &#123; <span class="comment">// 方法简写 但是必须 @click=&quot;jiaBtn(n)&quot; 带一个参数</span></span><br><span class="line">    <span class="comment">// jiaBtn() &#123;</span></span><br><span class="line">    <span class="comment">//   this.$store.commit(&quot;JIA&quot;, this.n);</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// jianBtn() &#123;</span></span><br><span class="line">    <span class="comment">//   this.$store.commit(&quot;JIAN&quot;, this.n);</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">// jiSHUjia() &#123;</span></span><br><span class="line">    <span class="comment">//   this.$store.dispatch(&quot;jiSHUjia&quot;, this.n);</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line">    <span class="comment">// awaitbtnjia() &#123;</span></span><br><span class="line">    <span class="comment">//   this.$store.dispatch(&quot;awaitbtnjia&quot;, this.n);</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">    ...<span class="title function_">mapMutations</span>(&#123; <span class="attr">jiaBtn</span>: <span class="string">&quot;JIA&quot;</span>, <span class="attr">jianBtn</span>: <span class="string">&quot;JIAN&quot;</span> &#125;),  <span class="comment">// 借助mapActions 写法 可以讲 commit 进行简写</span></span><br><span class="line">    ...<span class="title function_">mapActions</span>(&#123; <span class="attr">jiSHUjia</span>: <span class="string">&quot;jiSHUjia&quot;</span>, <span class="attr">awaitbtnjia</span>: <span class="string">&quot;awaitbtnjia&quot;</span> &#125;), </span><br><span class="line">    <span class="comment">// 借助mapMutations 写法 可以讲 dispatch 进行简写</span></span><br><span class="line">    </span><br><span class="line">    ...<span class="title function_">mapMutations</span>([<span class="string">&#x27;jiaBtn&#x27;</span>]), <span class="comment">// 如果向更简写 名字必须一样</span></span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">  &#125;,</span><br><span class="line">  </span><br><span class="line">  <span class="comment">//传参</span></span><br><span class="line">     @blur=<span class="string">&quot;add(value)&quot;</span></span><br><span class="line">     <span class="keyword">import</span> &#123; mapMutations &#125; <span class="keyword">from</span> <span class="string">&quot;vuex&quot;</span>;</span><br><span class="line">     ...<span class="title function_">mapMutations</span>([<span class="string">&quot;add&quot;</span>]),</span><br><span class="line">     </span><br><span class="line">     <span class="comment">//vuex</span></span><br><span class="line">    <span class="title function_">add</span>(<span class="params">state, value</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(state);</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(value);</span><br><span class="line">    &#125;</span><br><span class="line">  </span><br></pre></td></tr></table></figure>

<h5 id="8、路由和编程式导航"><a href="#8、路由和编程式导航" class="headerlink" title="8、路由和编程式导航"></a>8、路由和编程式导航</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>、 min.<span class="property">js</span>里面引入router</span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span> <span class="comment">// 路由</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span>  <span class="comment">// vuex</span></span><br><span class="line">  <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123; <span class="comment">//然后配置 </span></span><br><span class="line">  router,</span><br><span class="line">  store,</span><br><span class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"><span class="number">2</span>、在src里面创建router  / index.<span class="property">js</span></span><br><span class="line">     </span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span> <span class="comment">// 引入vue </span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">VueRouter</span> <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span> <span class="comment">// 引入VueRouter</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">VueRouter</span>) <span class="comment">// use VueRouter</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = [ <span class="comment">// 配置</span></span><br><span class="line">  &#123; </span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>, <span class="comment">// /表示默认路径localhost 8080 就是上来就展示这个文档</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;Home&#x27;</span>, <span class="comment">// 为home 展示</span></span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="title function_">import</span>(<span class="string">&#x27;../views/Home.vue&#x27;</span>) <span class="comment">// 引入默认的文档</span></span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/about&#x27;</span>,  <span class="comment">// 为/about 展示</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;About&#x27;</span>, <span class="comment">// About </span></span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="title function_">import</span>( <span class="comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="string">&#x27;../views/About.vue&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123; <span class="comment">// 暴露接口</span></span><br><span class="line">  routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 嵌套路由 这里鼻血加一个父组件名字</span></span><br><span class="line"> &lt;router-link to=<span class="string">&#x27;/Home/zi&#x27;</span>&gt;嵌套&lt;/router-link&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span></span><br><span class="line"><span class="attr">children</span>: [&#123;<span class="comment">// 用 children 来表示</span></span><br><span class="line">      <span class="attr">path</span>: <span class="string">&#x27;zi&#x27;</span>,</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;zi&#x27;</span>,</span><br><span class="line">      <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="title function_">import</span>(<span class="string">&#x27;../views/zi.vue&#x27;</span>),</span><br><span class="line">&#125;]</span><br><span class="line"></span><br><span class="line"><span class="number">1</span>、又叫编程式导航 路由的第二种写法,写在方法里面</span><br><span class="line">在vue中实现页面的跳转(路由的跳转) </span><br><span class="line">第一种方法可以用router-link标签套在要点击的内容的外面 to=要跳转的路径 但是这样会让样式发生改变 不推荐</span><br><span class="line">常用的是用js跳转（又叫编程式导航）</span><br><span class="line"><span class="number">1</span>、 query 跳转</span><br><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="title class_">IMGbTN</span>() &#123;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123;<span class="attr">path</span>:<span class="string">&quot;/contennt&quot;</span>&#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="number">1</span>、params 跳转</span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    <span class="title class_">IMGbTN</span>() &#123; <span class="comment">// 这里改为name 后面不用加上 /</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123;<span class="attr">name</span>:<span class="string">&quot;contennt&quot;</span>&#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>

<h5 id="9、路由传参，query、params"><a href="#9、路由传参，query、params" class="headerlink" title="9、路由传参，query、params"></a>9、路由传参，query、params</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">(<span class="number">1</span>)  query可以使用name和path而params只能使用name</span><br><span class="line">(<span class="number">2</span>)  使用params传参刷新后不会保存，而query传参刷新后可以保存</span><br><span class="line">(<span class="number">3</span>)  <span class="title class_">Params</span>在地址栏中不会显示，query会显示</span><br><span class="line">(<span class="number">4</span>)  <span class="title class_">Params</span>可以和动态路由一起使用，query不可以</span><br><span class="line"></span><br><span class="line"><span class="number">1</span>、种写法 query</span><br><span class="line"><span class="title function_">gotodetail</span>(<span class="params">item</span>) &#123; <span class="comment">//path 跳转详情页 query 路由传参传的是一个对像</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123; <span class="attr">path</span>: <span class="string">&quot;/detail&quot;</span>, <span class="attr">query</span>: &#123; <span class="attr">obj</span>: item &#125; &#125;);</span><br><span class="line">&#125;,</span><br><span class="line"> <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">obj</span>: <span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">query</span>.<span class="property">obj</span>,<span class="comment">// 这边是用来接受传过来的参数的</span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  </span><br><span class="line"> <span class="number">2</span>、种写法 params </span><br><span class="line"><span class="title function_">gotodetail</span>(<span class="params">item</span>) &#123; name 跳转路由的格式必须是name 不能是path  后面不需要加上属性</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123; <span class="attr">name</span>: <span class="string">&quot;detail&quot;</span>, <span class="attr">params</span>: &#123; <span class="attr">obj</span>: item &#125; &#125;);</span><br><span class="line">&#125;,  </span><br><span class="line"></span><br><span class="line"> <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">obj</span>: <span class="variable language_">this</span>.<span class="property">$route</span>.<span class="property">params</span>.<span class="property">obj</span>,<span class="comment">// 这边是用来接受传过来的参数的</span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  </span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">&quot;&#123; name: &#x27;users&#x27;, query: &#123; uname: james &#125;&#125;&quot;</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 方法2：</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123; <span class="attr">name</span>: <span class="string">&#x27;users&#x27;</span>, <span class="attr">query</span>:&#123; <span class="attr">uname</span>:james &#125;&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 方法3：</span></span><br><span class="line">&lt;router-link :to=<span class="string">&quot;&#123; path: &#x27;/user&#x27;, query: &#123; uname:james &#125;&#125;&quot;</span>&gt;按钮&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 方法4：</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123; <span class="attr">path</span>: <span class="string">&#x27;/user&#x27;</span>, <span class="attr">query</span>:&#123; <span class="attr">uname</span>:james &#125;&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 方法5：</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(<span class="string">&#x27;/user?uname=&#x27;</span> + jsmes)</span><br></pre></td></tr></table></figure>

<h5 id="10、路由守卫"><a href="#10、路由守卫" class="headerlink" title="10、路由守卫"></a>10、路由守卫</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="number">1</span>、 全局路由守卫写在ruter 路由里面</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  routes,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">beforeEach</span>(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">   <span class="comment">// next(); //放行路由</span></span><br><span class="line">   <span class="keyword">if</span> (<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&quot;username&quot;</span>)) &#123;</span><br><span class="line">    <span class="title function_">next</span>();</span><br><span class="line">   <span class="comment">//如果本地存储中有 username证明已经登陆了 就执行下一步</span></span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">     <span class="keyword">if</span> (to.<span class="property">path</span> == <span class="string">&quot;/login&quot;</span>) &#123;</span><br><span class="line">       <span class="title function_">next</span>();</span><br><span class="line">     &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">       <span class="title function_">next</span>(<span class="string">&quot;/login&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//为了防止死循环 如果是要跳转login 就放行 就不会死循环了，如果不是login就跳转到login</span></span><br><span class="line">   &#125;</span><br><span class="line"> &#125;);</span><br><span class="line"><span class="comment">//路由跳转之前执行</span></span><br><span class="line"></span><br><span class="line"><span class="number">2</span>、<span class="comment">//单个路由规则独享的守卫 跟组件级守卫功能一样 但是建议用组件级守卫</span></span><br><span class="line">&#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&quot;/shopcar&quot;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;shopcar&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="title function_">import</span>(<span class="string">&quot;../views/Shopcar.vue&quot;</span>),</span><br><span class="line">        <span class="title function_">beforeEnter</span>(<span class="params">to, <span class="keyword">from</span>, next</span>) &#123;</span><br><span class="line">          <span class="keyword">if</span> (<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&quot;username&quot;</span>)) &#123;</span><br><span class="line">            <span class="title function_">next</span>();</span><br><span class="line">          &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="title function_">next</span>(<span class="string">&quot;/login&quot;</span>);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">//单个路由规则独享的守卫 跟组件级守卫功能一样 但是建议用组件级守卫</span></span><br><span class="line">      &#125;,</span><br><span class="line">      </span><br><span class="line">      </span><br><span class="line"><span class="number">3</span>、<span class="comment">//守卫这个页面（路由跳转之前） 如果登陆了就继续访问 没有就跳转登录页面 直接写在这个界面里面</span></span><br><span class="line"><span class="title function_">beforeRouteEnter</span>(<span class="params">to, <span class="keyword">from</span>, next</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&quot;username&quot;</span>)) &#123;</span><br><span class="line">      <span class="title function_">next</span>();</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="title function_">next</span>(<span class="string">&quot;/login&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">//守卫这个页面（路由跳转之前） 如果登陆了就继续访问 没有就跳转登录页面</span></span><br></pre></td></tr></table></figure>



<h5 id="11、filter过滤器"><a href="#11、filter过滤器" class="headerlink" title="11、filter过滤器"></a>11、filter过滤器</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">是对插值语句中展示的内容进行格式的过滤</span><br><span class="line">使用在插值语句中，用管道符|使用&#123;&#123;xxx | 过滤器的名字&#125;&#125;</span><br><span class="line"></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>时间：&#123;&#123; time | filtime &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">name</span>: <span class="string">&quot;date&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">time</span>: <span class="keyword">new</span> <span class="title class_">Date</span>(),</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">filters</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">filtime</span>(<span class="params">val</span>) &#123; <span class="comment">// 过滤时间</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> time = <span class="keyword">new</span> <span class="title class_">Date</span>(val)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> year = time.<span class="title function_">getFullYear</span>() </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> month = time.<span class="title function_">getMonth</span>() +<span class="number">1</span> </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> day = time.<span class="title function_">getDate</span>()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> hour = time.<span class="title function_">getHours</span>()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> minus = time.<span class="title function_">getMinutes</span>()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">let</span> seconds = time.<span class="title function_">getSeconds</span>()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span> <span class="string">` <span class="subst">$&#123;year&#125;</span> 年- <span class="subst">$&#123;month&#125;</span> 月-<span class="subst">$&#123;day&#125;</span> 号 时：<span class="subst">$&#123;hour&#125;</span>分：<span class="subst">$&#123;minus&#125;</span> 秒:<span class="subst">$&#123;seconds&#125;</span>`</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>



<h5 id="12、自定义指令"><a href="#12、自定义指令" class="headerlink" title="12、自定义指令"></a>12、自定义指令</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"> v-focus <span class="comment">// 自定义指令自动获取焦点 如果多个单词用-线做分割</span></span><br><span class="line"> </span><br><span class="line">  <span class="attr">directives</span>: &#123;</span><br><span class="line">    <span class="title function_">focus</span>(<span class="params">ele, value</span>) &#123; <span class="number">1</span>、函数写法</span><br><span class="line">      <span class="comment">// 获取focus 必须是异步操作</span></span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        ele.<span class="title function_">focus</span>();</span><br><span class="line">      &#125;, <span class="number">0</span>);</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="attr">focus</span>: &#123;</span><br><span class="line">      <span class="title function_">bind</span>(<span class="params">ele, big</span>) &#123; <span class="number">2</span>、对象写法</span><br><span class="line">        <span class="comment">// 指令与元素绑定时调用</span></span><br><span class="line">        ele.<span class="property">value</span> = big.<span class="property">value</span>;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="title function_">inserted</span>(<span class="params">ele, big</span>) &#123;</span><br><span class="line">        <span class="comment">// 元素插入页面时调用</span></span><br><span class="line">        ele.<span class="title function_">focus</span>();</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="title function_">update</span>(<span class="params">ele, big</span>) &#123;</span><br><span class="line">        <span class="comment">// 磨板重新解析时调用</span></span><br><span class="line">        ele.<span class="property">value</span> = big.<span class="property">value</span>;</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  </span><br><span class="line">  </span><br><span class="line">  </span><br><span class="line">  </span><br><span class="line">  <span class="comment">// 封装拖拽   v-drag</span></span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line"><span class="keyword">let</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">readomSize</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">150</span> + <span class="number">50</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;yellow&#x27;</span>, <span class="string">&#x27;green&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>, <span class="string">&#x27;pink&#x27;</span>, <span class="string">&#x27;purple&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">randomColor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">round</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * <span class="number">5</span>)</span><br><span class="line">&#125;</span><br><span class="line">app.<span class="title function_">directive</span>(<span class="string">&#x27;drag&#x27;</span>, &#123;</span><br><span class="line">    <span class="title function_">created</span>(<span class="params">el, binding, vnode</span>) &#123;</span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">        <span class="comment">// el是指定绑定的元素 binding是一个对象 对象中包含指令的值 第三个是虚拟dom节点</span></span><br><span class="line">        el.<span class="property">style</span>.<span class="property">position</span> = <span class="string">&#x27;absolute&#x27;</span></span><br><span class="line">        el.<span class="property">style</span>.<span class="property">width</span> = <span class="title function_">readomSize</span>() + <span class="string">&#x27;px&#x27;</span></span><br><span class="line">        el.<span class="property">style</span>.<span class="property">height</span> = <span class="title function_">readomSize</span>() + <span class="string">&#x27;px&#x27;</span></span><br><span class="line">        el.<span class="property">style</span>.<span class="property">backgroundColor</span> = arr[<span class="title function_">randomColor</span>()]</span><br><span class="line">        <span class="keyword">let</span> x = <span class="number">0</span> <span class="comment">// 滑块所在的初始X轴位置</span></span><br><span class="line">        <span class="keyword">let</span> y = <span class="number">0</span> <span class="comment">// 元素所在的初始Y轴的位置</span></span><br><span class="line">        el.<span class="property">ontouchstart</span> = <span class="keyword">function</span>(<span class="params">ev</span>) &#123;</span><br><span class="line">            x = ev.<span class="property">touches</span>[<span class="number">0</span>].<span class="property">pageX</span> - el.<span class="property">offsetLeft</span></span><br><span class="line">            y = ev.<span class="property">touches</span>[<span class="number">0</span>].<span class="property">pageY</span> - el.<span class="property">offsetTop</span></span><br><span class="line">            el.<span class="property">ontouchmove</span> = <span class="keyword">function</span>(<span class="params">mv</span>) &#123;</span><br><span class="line">                <span class="comment">// console.log(mv);</span></span><br><span class="line">                <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>);</span><br><span class="line">                <span class="keyword">let</span> left = mv.<span class="property">touches</span>[<span class="number">0</span>].<span class="property">pageX</span> - x</span><br><span class="line">                <span class="keyword">let</span> top = mv.<span class="property">touches</span>[<span class="number">0</span>].<span class="property">pageY</span> - y</span><br><span class="line">                el.<span class="property">style</span>.<span class="property">left</span> = left + <span class="string">&#x27;px&#x27;</span></span><br><span class="line">                el.<span class="property">style</span>.<span class="property">top</span> = top + <span class="string">&#x27;px&#x27;</span></span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="variable language_">document</span>.<span class="property">ontouchend</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">            el.<span class="property">ontouchmove</span> = <span class="literal">null</span></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.<span class="title function_">directive</span>(<span class="string">&#x27;back&#x27;</span>, &#123;</span><br><span class="line">    <span class="title function_">created</span>(<span class="params">el, binding, vnode</span>) &#123;</span><br><span class="line">    el绑定的元素可以为当前的元素设置样式</span><br><span class="line">    binding 是v-back =<span class="string">&#x27;binding&#x27;</span>  binding传的值</span><br><span class="line">    vnode 虚拟节点</span><br><span class="line">        <span class="comment">// console.log(binding);</span></span><br><span class="line">        el.<span class="property">style</span>.<span class="property">backgroundColor</span> = binding.<span class="property">value</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">updated</span>(<span class="params">el, binding, vnode</span>) &#123; <span class="comment">// 必须要有updated钩子函数</span></span><br><span class="line">        <span class="comment">// console.log(binding);</span></span><br><span class="line">        el.<span class="property">style</span>.<span class="property">backgroundColor</span> = binding.<span class="property">value</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">app.<span class="title function_">use</span>(store).<span class="title function_">use</span>(router).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h5 id="13、mixin混入"><a href="#13、mixin混入" class="headerlink" title="13、mixin混入"></a>13、mixin混入</h5><p> 可以把多个组件公用的配置提取成一个混入对象</p>
<p>若果mixin 里的data数据名字和 组件里的data名字重复了，会用组件里的data数据，不会用mixin里的data</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一步创建 mixin.js 文件夹</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">    mapMutations</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&quot;vuex&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> mixin = &#123; <span class="comment">// 把逻辑扔到里面</span></span><br><span class="line">    <span class="attr">methods</span>: &#123;</span><br><span class="line">        <span class="title function_">add</span>(<span class="params"></span>) &#123;&#125;,</span><br><span class="line">        ...<span class="title function_">mapMutations</span>([<span class="string">&quot;add&quot;</span>]),</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">mounted</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;mixin&#x27;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 组件里使用</span></span><br><span class="line"><span class="keyword">import</span> &#123; mixin &#125; <span class="keyword">from</span> <span class="string">&quot;../mixin&quot;</span>;</span><br><span class="line"><span class="attr">mixins</span>: [mixin], <span class="comment">// 跟data同级</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 引入全局混入 在哪里都可以用</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  mixin2,</span><br><span class="line">  mixin</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&#x27;./mixin&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">mixin</span>(mixin2)</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">mixin</span>(mixin)</span><br></pre></td></tr></table></figure>

<h5 id="14、插槽"><a href="#14、插槽" class="headerlink" title="14、插槽"></a>14、插槽</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间的通信方式，适用于父组件==&gt; 子组件 --&gt;</span><br><span class="line"><span class="comment">//子组件</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      作用域插槽 你好、</span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">slot</span> <span class="attr">:obj</span>=<span class="string">&quot;obj&quot;</span> <span class="attr">:max</span>=<span class="string">&quot;max&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="comment">&lt;!-- 把数据传给插槽的使用者了 ，谁往里面赛结构就传给了谁--&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">obj</span>: <span class="string">&quot;作用域插槽&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="attr">max</span>: <span class="string">&#x27;99999&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//父组件</span></span><br><span class="line"> &lt;!--  作用域插槽：数据定义在组件的自身，就是定义插槽的自身 但是根据数据生成的结构需要组件的使用者来决定--&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">slotS</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">scope</span>=<span class="string">&quot;szh&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        &#123;&#123; szh &#125;&#125;</span></span><br><span class="line"><span class="language-xml">        <span class="comment">&lt;!--  &#123;&#123; szh &#125;&#125; 就是定义插槽组件里的数据 可以访问</span></span></span><br><span class="line"><span class="comment"><span class="language-xml">          obj: &quot;作用域插槽&quot;,</span></span></span><br><span class="line"><span class="comment"><span class="language-xml">          max: &#x27;99999&#x27;,</span></span></span><br><span class="line"><span class="comment"><span class="language-xml">          --&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;i in szh.obj&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;i&quot;</span>&gt;</span>&#123;&#123; i &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">slotS</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    </span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">slotS</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">scope</span>=<span class="string">&quot;&#123;max&#125;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="comment">&lt;!-- &#123;max&#125; 可以结构赋值--&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">ol</span> <span class="attr">v-for</span>=<span class="string">&quot;i in max&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;i&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            &#123;&#123;</span></span><br><span class="line"><span class="language-xml">              i</span></span><br><span class="line"><span class="language-xml">            &#125;&#125;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">slotS</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> slotS <span class="keyword">from</span> <span class="string">&quot;../components/slotS.vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123; slotS &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>



<h2 id="1、数组方法总结"><a href="#1、数组方法总结" class="headerlink" title="1、数组方法总结"></a>1、数组方法总结</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br></pre></td><td class="code"><pre><span class="line">  <span class="number">1</span>、<span class="keyword">delete</span>  [<span class="number">1</span>] <span class="keyword">delete</span> 可以删除数组中的一向</span><br><span class="line">  <span class="keyword">var</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">  <span class="keyword">delete</span>  [<span class="number">1</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( );</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">2</span>、 类数组对象 <span class="variable language_">arguments</span> 遍历 利用扩展运算符</span><br><span class="line">  <span class="keyword">function</span>  (<span class="params"></span>) &#123;</span><br><span class="line">      [...<span class="variable language_">arguments</span>].<span class="title function_">forEach</span>(<span class="function"><span class="params">element</span> =&gt;</span> &#123;</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(element);</span><br><span class="line">      &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">   (<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">89</span>,)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">3</span>、类数组对象   =&gt; 字符串</span><br><span class="line">  <span class="keyword">var</span> str = <span class="string">&#x27;123&#x27;</span></span><br><span class="line">  字符串也相当一个数组 但是不可以用数组方法操控他的改变它长度的方法</span><br><span class="line">   ay.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">forEach</span>.<span class="title function_">call</span>(str, <span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(item); <span class="comment">//调用数组上的方法来便利字符串</span></span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">   <span class="number">4</span>、数组上的toString方法  转换字符串</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ay.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>([<span class="number">1</span>, <span class="number">2</span>, [<span class="number">8</span>, <span class="number">2</span>, [<span class="number">22</span>], <span class="number">6</span>], <span class="number">2</span>]));</span><br><span class="line"></span><br><span class="line">    <span class="number">5</span>、 join 讲数组进行分割成为字符串  这能分割一层在套一层就分隔不了了</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, [<span class="number">2</span>, [<span class="number">3</span>, [<span class="number">5</span>]], <span class="number">89</span>], <span class="number">9</span>,].<span class="title function_">join</span>(<span class="string">&#x27;-&#x27;</span>));</span><br><span class="line"></span><br><span class="line">  <span class="number">6</span>、<span class="title function_">push</span>() 在么数组的末尾添加  它是有返回值的返回的是数组的长度</span><br><span class="line">  <span class="keyword">var</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ,  .<span class="title function_">push</span>(<span class="number">55</span>));</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="number">7</span>、pop 在么数组的末尾删除   它是有返回值的返回的是删除的内容</span><br><span class="line">  <span class="keyword">var</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">888</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ,  .<span class="title function_">pop</span>());</span><br><span class="line"></span><br><span class="line">  <span class="number">8</span>、unshift   在么数组的头部添加  它是有返回值的返回的是数组的长度</span><br><span class="line">  <span class="keyword">var</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">888</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ,  .<span class="title function_">unshift</span>(<span class="number">0</span>));</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">9</span>、shift   在么数组的头部删除 它是有返回值的返回的是删除的内容</span><br><span class="line">  <span class="keyword">var</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">888</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ,  .<span class="title function_">shift</span>());</span><br><span class="line"></span><br><span class="line">  <span class="number">9</span>、reverse   原数组倒序  它的返回值是倒序之后的原数组</span><br><span class="line">  <span class="keyword">var</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">888</span>, <span class="number">456</span>, <span class="number">66</span>, <span class="number">77</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ,  .<span class="title function_">reverse</span>())</span><br><span class="line"></span><br><span class="line">    <span class="number">10</span>、sort 排序 如果下面参数的正反 控制 升序和降序 ，返回的是从新排序的原数组</span><br><span class="line">  <span class="keyword">const</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">888</span>, <span class="number">456</span>, <span class="number">66</span>, <span class="number">77</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ,  .<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> b - a));</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">11</span>、 随机排序  乱序</span><br><span class="line">  <span class="keyword">var</span> arr  = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">888</span>, <span class="number">456</span>, <span class="number">66</span>, <span class="number">77</span>]</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">compate</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="title class_">Math</span>.<span class="title function_">random</span>() - <span class="number">0.5</span></span><br><span class="line">      <span class="comment">// 借助内置对象</span></span><br><span class="line">  &#125;</span><br><span class="line">   arr.<span class="title function_">sort</span>(compate)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( arr.<span class="title function_">sort</span>(compate));</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">12</span>、 <span class="title function_">concat</span>() 数组的拼接</span><br><span class="line">  <span class="keyword">var</span>   = [<span class="number">1</span>,<span class="number">3</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( , .<span class="title function_">concat</span>([<span class="number">2</span>,<span class="number">8</span>,<span class="number">9</span>]));</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ,[... ,<span class="number">2</span>,<span class="number">8</span>,<span class="number">9</span>]); </span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">13</span> 、<span class="title function_">slice</span>(<span class="number">4</span>)  不修改原数组</span><br><span class="line">  左闭右开 就是将左边的删除右边的 留下  。 填的是下标,若果想保留最后两位 -<span class="number">2</span></span><br><span class="line">  这里可以填两个参数 就是从下标，几到几包含，其他删除</span><br><span class="line">  <span class="keyword">const</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">888</span>, <span class="number">456</span>, <span class="number">66</span>, <span class="number">77</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( , .<span class="title function_">slice</span>(-<span class="number">2</span>));</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> str = <span class="string">&#x27;123&#x27;</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ay.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(str)); <span class="comment">//  也可以这样将字符串转数组</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">function</span>  (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>( ay.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>));<span class="comment">//  也可以这样将字符串转数组</span></span><br><span class="line">  &#125;</span><br><span class="line">   (<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">89</span>,)</span><br><span class="line"></span><br><span class="line">  <span class="number">14</span>、splice 修改原数组 第一个参数起始的位置 第二个参数要删除的几个元素 第三个值插入的值</span><br><span class="line">  如果想要在指定位置前面插入数值，那么删除几个就要写为<span class="number">0</span>，不写为零则是替换</span><br><span class="line">  <span class="keyword">const</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">888</span>, <span class="number">456</span>, <span class="number">66</span>, <span class="number">77</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( ,  .<span class="title function_">splice</span>(<span class="number">4</span>, <span class="number">0</span>, [<span class="string">&#x27;你好&#x27;</span>]));</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">15</span>、indexOf   lastIndexOf 找索引</span><br><span class="line">  indexOf  找索如果找到了就会返回当前的一个下标，若果没找到就会反回-<span class="number">1</span></span><br><span class="line">  lastIndexOf 它是从最后一个值向前查找的 找索如果找到了就会返回当前的一个下标，若果没找到就会反回-<span class="number">1</span></span><br><span class="line">  <span class="keyword">const</span>   = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">888</span>, <span class="number">456</span>, <span class="number">66</span>, <span class="number">77</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( .<span class="title function_">lastIndexOf</span>(<span class="number">669</span>));</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( .<span class="title function_">indexOf</span>(<span class="number">669</span>));</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">16</span>、数组实例上的方法</span><br><span class="line">   <span class="title class_">Array</span>.<span class="title function_">of</span>() 填充单个值</span><br><span class="line">   <span class="title class_">Array</span>.<span class="title function_">from</span>() 来源是类数组</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( <span class="title class_">Array</span>(<span class="number">1</span>, <span class="number">21</span>, <span class="number">3</span>, <span class="number">5</span>));</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( <span class="title class_">Array</span>.<span class="title function_">of</span>(<span class="number">888</span>));</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( <span class="title class_">Array</span>.<span class="title function_">of</span>(<span class="number">888</span>, <span class="number">999</span>, <span class="number">888</span>));</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="string">&#x27;121&#x27;</span>)); 也可以分解字符串为数组</span><br><span class="line">  <span class="keyword">function</span>  (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>( <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>));<span class="comment">// 这个是通过slice方法</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>([...<span class="variable language_">arguments</span>]);<span class="comment">// 扩展运算符</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>( <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="variable language_">arguments</span>)); 可以将上面的省略调</span><br><span class="line">  &#125;</span><br><span class="line">   (<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">8</span>, <span class="number">2</span>, <span class="number">45</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">17</span> 、fill填充方法 可以传入<span class="number">3</span>各参数 可以填充数组里的值也就是替换 如果一个值全部都替换掉 </span><br><span class="line">  第一个参数就是值 第二个参数 从起始第几个 =第三个参数就是最后一个</span><br><span class="line">  <span class="keyword">var</span>   = [<span class="number">12</span>, <span class="number">2</span>, <span class="number">21</span>, <span class="number">56</span>, <span class="number">16</span>, <span class="number">16</span>,]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( .<span class="title function_">fill</span>(<span class="number">6</span>, <span class="number">3</span>, <span class="number">4</span>));</span><br><span class="line">  </span><br><span class="line">  </span><br><span class="line">  <span class="number">18</span>、<span class="title function_">includes</span>(<span class="number">21</span>) 找数组里面的值如果找到了那么就返回<span class="literal">true</span> 否则返回<span class="literal">false</span></span><br><span class="line">  <span class="keyword">var</span>   = [<span class="number">12</span>, <span class="number">2</span>, <span class="number">21</span>, <span class="number">56</span>, <span class="number">16</span>, <span class="number">16</span>,]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( .<span class="title function_">includes</span>(<span class="number">21</span>));</span><br><span class="line"></span><br><span class="line">  <span class="number">19</span>、<span class="title function_">find</span>() 查找这一组数 符合条件的第一个数 给他返回出来</span><br><span class="line">  <span class="keyword">let</span>   = [<span class="number">2</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">12</span>,]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( .<span class="title function_">find</span>(<span class="function"><span class="params">item</span> =&gt;</span> item &gt; <span class="number">5</span>));<span class="comment">//符合条件的第一个数 给他返回出来</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">20</span>、<span class="title function_">findIndex</span>() 查找这一组数 符合条件的第一数的下标 给他返回出来</span><br><span class="line">  <span class="keyword">let</span>   = [<span class="number">2</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">12</span>,]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>( .<span class="title function_">findIndex</span>(<span class="function"><span class="params">item</span> =&gt;</span> item &gt; <span class="number">5</span>));<span class="comment">//符合条件的第一数的下标 给他返回出来</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">21</span>、keys 属性名  values属性值  entries属性和属性值</span><br><span class="line">   ay.<span class="title function_">keys</span>()</span><br><span class="line">   ay.<span class="title function_">values</span>()</span><br><span class="line">   ay.<span class="title function_">entries</span>()</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> obj = &#123;</span><br><span class="line">      <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span>, <span class="attr">c</span>: <span class="number">3</span>, <span class="attr">d</span>: <span class="number">4</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(obj));</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">values</span>(obj));</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">entries</span>(obj));</span><br><span class="line"></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">of</span> <span class="title class_">Object</span>.<span class="title function_">keys</span>(obj)) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(key);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">of</span> <span class="title class_">Object</span>.<span class="title function_">values</span>(obj)) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(key);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> [key, value] <span class="keyword">of</span> <span class="title class_">Object</span>.<span class="title function_">entries</span>(obj)) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(key, value);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">keys</span>());</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">values</span>());</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">entries</span>());</span><br><span class="line"></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">of</span> arr.<span class="title function_">keys</span>()) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(key);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;--------------------&#x27;</span>);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">of</span> arr.<span class="title function_">values</span>()) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(key);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;--------------------&#x27;</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> [key, value] <span class="keyword">of</span> arr.<span class="title function_">entries</span>()) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(key, value);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">22</span> 、forEach 循环便利 有<span class="number">3</span>个参数 无法使用 <span class="keyword">break</span> <span class="keyword">continue</span> </span><br><span class="line">  参数一就是每个元素 参数二就是每个下标 参数三就是每个一项包扩下标和元素</span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">  arr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(item, index, arr);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;-------------&#x27;</span>);</span><br><span class="line">  <span class="comment">// 数组的原型循环指向arr</span></span><br><span class="line">  <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">forEach</span>.<span class="title function_">call</span>(arr, <span class="function">(<span class="params">item, index, arr</span>) =&gt;</span> &#123; <span class="comment">// 这样写等同上面</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(item, index, arr);</span><br><span class="line">  &#125;)</span><br><span class="line">  </span><br><span class="line">  </span><br><span class="line">  <span class="number">22</span>、<span class="keyword">delete</span> 删除第几个返回值是boolean</span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, , <span class="number">2</span>, <span class="number">3</span>,] <span class="comment">// 如果这里是空不保undefined for循环会报错</span></span><br><span class="line">  <span class="comment">// console.log(arr, delete (arr[0]));</span></span><br><span class="line">  arr.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(item,);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;---&#x27;</span>);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(arr[i]);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">text</span>(<span class="params"></span>) &#123; <span class="comment">// 伪类的循环方法</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>);</span><br><span class="line">      <span class="comment">// [...arguments].forEach(element =&gt; &#123;</span></span><br><span class="line">      <span class="comment">//     console.log(element);</span></span><br><span class="line">      <span class="comment">// &#125;);</span></span><br><span class="line">      <span class="comment">// Array.from(arguments).forEach(element =&gt; &#123;</span></span><br><span class="line">      <span class="comment">//     console.log(element);</span></span><br><span class="line">      <span class="comment">// &#125;);</span></span><br><span class="line">      <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">forEach</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>, <span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">text</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">6</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">23</span>、map 映射关系的数组  map 主要就是有返回值可以<span class="keyword">return</span> 数组  判断的会返回boolean</span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">  <span class="keyword">let</span> newArr = arr.<span class="title function_">map</span>(<span class="function">(<span class="params">item, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> item * <span class="number">2</span></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> obj = [&#123;<span class="comment">// 这样那数据很方便</span></span><br><span class="line">      <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span>, <span class="attr">c</span>: <span class="number">3</span>, <span class="attr">d</span>: <span class="number">4</span></span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">      <span class="attr">a</span>: <span class="number">8</span>, <span class="attr">b</span>: <span class="number">8</span>, <span class="attr">c</span>: <span class="number">8</span>, <span class="attr">d</span>: <span class="number">6</span></span><br><span class="line">  &#125;]</span><br><span class="line">  <span class="keyword">let</span> newArr = obj.<span class="title function_">map</span>(<span class="function">(<span class="params">item, index, arr</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> item</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br><span class="line">  <span class="keyword">var</span> test = ([ <span class="comment">// 小案例拿到每一组的最大值</span></span><br><span class="line"></span><br><span class="line">      [<span class="number">7</span>, <span class="number">8</span>, <span class="number">89</span>, <span class="number">49</span>],</span><br><span class="line">      [<span class="number">7</span>, <span class="number">8</span>, <span class="number">87</span>, <span class="number">89546</span>, <span class="number">68778</span>],</span><br><span class="line">      [<span class="number">7</span>, <span class="number">547</span>, <span class="number">687</span>, <span class="number">68767</span>, <span class="number">999</span>, <span class="number">999999</span>],</span><br><span class="line">      [<span class="number">2</span>, <span class="number">587</span>, <span class="number">867</span>, <span class="number">5755</span>, <span class="number">544</span>, <span class="number">7457</span>, <span class="number">678656</span>, <span class="number">7868757</span>],</span><br><span class="line">  ]</span><br><span class="line">  )</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> <span class="title class_">Newtest</span> = test.<span class="title function_">map</span>(<span class="function">(<span class="params">item, index, value</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> item.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">return</span> b - a</span><br><span class="line">      &#125;)[<span class="number">0</span>]</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Newtest</span>);</span><br><span class="line">  <span class="keyword">let</span> newArr = test.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> b - a)[<span class="number">0</span>])<span class="comment">// 简化代码</span></span><br><span class="line">  <span class="keyword">let</span> newArr = test.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a - b).<span class="title function_">pop</span>())<span class="comment">// 简化代码</span></span><br><span class="line">  <span class="keyword">let</span> newArr = test.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> <span class="title class_">Math</span>.<span class="title function_">max</span>(...item))<span class="comment">// 拿到最大值</span></span><br><span class="line">  <span class="keyword">let</span> newArr = test.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="title function_">reduce</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a &gt; b ? a : b)) <span class="comment">//map 和 reduce 方法</span></span><br><span class="line">  <span class="keyword">let</span> newArr = test.<span class="title function_">map</span>(<span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">apply</span>.<span class="title function_">bind</span>(<span class="title class_">Math</span>.<span class="property">max</span>, <span class="literal">null</span>)) </span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br><span class="line"></span><br><span class="line">  <span class="number">24</span>、filter 满足条件的都能返回 是一个数组</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> text = &#123;</span><br><span class="line">      <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">      <span class="attr">b</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">  <span class="keyword">let</span> newArr = arr.<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">item, index, arr</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">      <span class="keyword">return</span> item &gt; <span class="number">3</span></span><br><span class="line">  &#125;, text);<span class="comment">// 这里可以传一个参数 回调函数</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">5</span>, -<span class="number">1</span>, <span class="number">0</span>, <span class="literal">undefined</span>, <span class="literal">null</span>, <span class="string">&#x27;&#x27;</span>, <span class="literal">false</span>, <span class="title class_">NaN</span>, <span class="number">0.2</span>] <span class="comment">// 过滤掉undefined 、 null</span></span><br><span class="line">  <span class="keyword">let</span> newArr = arr.<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">item, index, arr</span>) &#123;</span><br><span class="line">      <span class="comment">// return item != undefined</span></span><br><span class="line">      <span class="keyword">return</span> <span class="title class_">Number</span>.<span class="title function_">isInteger</span>(item)<span class="comment">// 这个方法就是把整数给过滤出来</span></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br><span class="line"></span><br><span class="line">  <span class="number">25</span>、some返回boolean 循环数组 只要有一个成员通过了就会返回 <span class="literal">true</span> 反而 <span class="literal">false</span>   </span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">  <span class="keyword">let</span> newArr = arr.<span class="title function_">some</span>(<span class="keyword">function</span> (<span class="params">item, index, arr</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> item &gt; <span class="number">999</span><span class="comment">//只要有一个成员通过了就会返回 true</span></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">26</span>、every返回boolean 循环数组 只有全部成员通过了就会返回 <span class="literal">true</span> 反而 <span class="literal">false</span> </span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">  <span class="keyword">let</span> newArr = arr.<span class="title function_">every</span>(<span class="keyword">function</span> (<span class="params">item, index, arr</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> item &gt; <span class="number">0</span> <span class="comment">//只有全部成员通过了就会返回 true 反而 false </span></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(newArr);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="number">27</span>、<span class="title function_">reduce</span>() 累加器 把上一次计算的值，给下一次计算进行相加</span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">8</span>,]</span><br><span class="line">  <span class="keyword">let</span> <span class="title class_">Newarr</span> = arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">a, c, b, e</span>) =&gt;</span> &#123; <span class="comment">// 这是为没有第二个参数</span></span><br><span class="line">      <span class="keyword">return</span> a + c</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Newarr</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">6</span>, <span class="number">8</span>,]</span><br><span class="line">  <span class="keyword">let</span> <span class="title class_">Newarr</span> = arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">a, c, b, e</span>) =&gt;</span> &#123; <span class="comment">// 有第二个参数作为下一次便利的初始值</span></span><br><span class="line">      <span class="keyword">return</span> a + c</span><br><span class="line">  &#125;, <span class="number">10</span>) <span class="comment">// 先加上10 在进行累加。</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Newarr</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> flattened = [[<span class="number">0</span>, <span class="number">1</span>], [<span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">5</span>]].<span class="title function_">reduce</span>(  <span class="comment">// 将数组拼接</span></span><br><span class="line">      <span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">          <span class="keyword">return</span> a.<span class="title function_">concat</span>(b);</span><br><span class="line">      &#125;,</span><br><span class="line">      []</span><br><span class="line">  );</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(flattened);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> names = [<span class="string">&#x27;Alice&#x27;</span>, <span class="string">&#x27;Bob&#x27;</span>, <span class="string">&#x27;Tiff&#x27;</span>, <span class="string">&#x27;Bruce&#x27;</span>, <span class="string">&#x27;Alice&#x27;</span>, <span class="string">&#x27;Bruce&#x27;</span>,];</span><br><span class="line">  <span class="comment">// 计算数组中每个元素出现的次数</span></span><br><span class="line">  <span class="keyword">var</span> countedNames = names.<span class="title function_">reduce</span>(<span class="keyword">function</span> (<span class="params">allNames, name</span>) &#123;</span><br><span class="line">      <span class="keyword">if</span> (name <span class="keyword">in</span> allNames) &#123;</span><br><span class="line">          allNames[name]++;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">else</span> &#123;</span><br><span class="line">          allNames[name] = <span class="number">1</span>;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> allNames;</span><br><span class="line">  &#125;, &#123;&#125;);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(countedNames);</span><br><span class="line">   手写一个map</span><br><span class="line">  <span class="keyword">if</span> (!<span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">mapUsingReduce</span>) &#123;</span><br><span class="line">      <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">mapUsingReduce</span> = <span class="keyword">function</span> (<span class="params">callback, thisArg</span>) &#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">reduce</span>(<span class="keyword">function</span> (<span class="params">mappedArray, currentValue, index, array</span>) &#123;</span><br><span class="line">              mappedArray[index] = callback.<span class="title function_">call</span>(thisArg, currentValue, index, array)</span><br><span class="line">              <span class="keyword">return</span> mappedArray</span><br><span class="line">          &#125;, [])</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  [<span class="number">1</span>, <span class="number">2</span>, , <span class="number">3</span>].<span class="title function_">mapUsingReduce</span>(</span><br><span class="line">      <span class="function">(<span class="params">currentValue, index, array</span>) =&gt;</span> currentValue + index + array.<span class="property">length</span></span><br><span class="line">  ) <span class="comment">// [5, 7, , 10]</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">.2</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">5</span>]</span><br><span class="line">  <span class="keyword">let</span> newARR = arr.<span class="title function_">mapUsingReduce</span>(<span class="function">(<span class="params">item, i</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> item</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(newARR);</span><br><span class="line">  </span><br><span class="line">  <span class="number">28</span>、includes   使用 <span class="title function_">includes</span>()比较字符串和字符时是区分大小写。 用来搜索</span><br><span class="line">  [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">includes</span>(<span class="number">2</span>);     <span class="comment">// true</span></span><br><span class="line">  [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">includes</span>(<span class="number">4</span>);     <span class="comment">// false</span></span><br><span class="line">  [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">includes</span>(<span class="number">3</span>, <span class="number">3</span>);  <span class="comment">// false</span></span><br><span class="line">  [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">includes</span>(<span class="number">3</span>, -<span class="number">1</span>); <span class="comment">// true</span></span><br><span class="line">  [<span class="number">1</span>, <span class="number">2</span>, <span class="title class_">NaN</span>].<span class="title function_">includes</span>(<span class="title class_">NaN</span>); <span class="comment">// true</span></span><br><span class="line">  fromIndex 可选</span><br><span class="line">从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.<span class="property">length</span> + fromIndex 的索引开始搜 （即使从末尾开始往   前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 <span class="number">0</span>。   </span><br><span class="line">   <span class="keyword">let</span> <span class="title class_">Nwaobj</span> = result.<span class="property">data</span>.<span class="property">list</span>.<span class="title function_">filter</span>(<span class="function">(<span class="params">ele</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> ele.<span class="property">title</span>.<span class="title function_">indexOf</span>(<span class="variable language_">this</span>.<span class="property">search</span>) != -<span class="number">1</span>;</span><br><span class="line">      <span class="comment">//   return ele.title.includes(this.search);</span></span><br><span class="line">      <span class="comment">// this.search 输入的值</span></span><br><span class="line">      </span><br><span class="line">    &#125;)</span><br><span class="line">    </span><br><span class="line"><span class="number">29</span>、<span class="keyword">instanceof</span> 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。</span><br><span class="line">    </span><br><span class="line"> <span class="number">30</span>、 set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用</span><br><span class="line"> <span class="keyword">let</span> arr = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">55</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">2</span>]) <span class="comment">// 可以遍历</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="property">size</span>); <span class="comment">// 有几个</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">delete</span>()); <span class="comment">// 删除</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">has</span>(<span class="number">1</span>)); <span class="comment">// 判断有没有这个数值</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">clear</span>()); <span class="comment">// 清除全部成员</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">add</span>(<span class="number">5</span>));</span><br></pre></td></tr></table></figure>



<h5 id="2、面向对象"><a href="#2、面向对象" class="headerlink" title="2、面向对象"></a>2、面向对象</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line">通过<span class="keyword">class</span> 关键字创建类，类名我们还是习惯性定义首字母大写</span><br><span class="line">通过constructor 函数，可以接受传递过来的参数，同是返回实例对象</span><br><span class="line">constructor 函数只要<span class="keyword">new</span> 生成实例时就会自动调用这个函数，如果我们不写</span><br><span class="line">这个函数类也会自动生成这个函数</span><br><span class="line">生成实例<span class="keyword">new</span> 不能省略</span><br><span class="line">最后注意语法规范,创建类 类名后面不要加小括号 生成实例 类名后面加小括号,构造函数不需要加<span class="keyword">function</span></span><br><span class="line">我们的类里不需要加上<span class="keyword">function</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1、 class类 在里面写入方法</span></span><br><span class="line"><span class="comment">// class Start &#123;</span></span><br><span class="line"><span class="comment">//     constructor(a, b) &#123;</span></span><br><span class="line"><span class="comment">//         this.a = a</span></span><br><span class="line"><span class="comment">//         this.b = b</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">//     str(n) &#123; // 在类中写入方法</span></span><br><span class="line"><span class="comment">//         console.log(this.a + n);</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// let bb = new Start(&#x27;打完大&#x27;, &#x27;吊袜带哇&#x27;)</span></span><br><span class="line"><span class="comment">// let vv = new Start(1, 2)</span></span><br><span class="line"><span class="comment">// console.log(bb);</span></span><br><span class="line"><span class="comment">// console.log(vv);</span></span><br><span class="line"><span class="comment">// vv.str(&#x27;这里可以传递参数&#x27;)</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//2、类的继承</span></span><br><span class="line"><span class="comment">// class Start &#123;</span></span><br><span class="line"><span class="comment">//     constructor() &#123;</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">//     str() &#123; // 在类中写入方法</span></span><br><span class="line"><span class="comment">//         console.log(123);</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// class Son extends Start &#123;</span></span><br><span class="line"><span class="comment">//     // 只要有 extends 就可以继承父亲的属性  但是如果子里面有，就是子，    相反那么他就会去父</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// let vv = new Son()</span></span><br><span class="line"><span class="comment">// console.log(Son);</span></span><br><span class="line"><span class="comment">// vv.str()</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// class Father &#123; //相当封装了一个加法器</span></span><br><span class="line"><span class="comment">//     constructor(a, b) &#123;</span></span><br><span class="line"><span class="comment">//         this.a = a</span></span><br><span class="line"><span class="comment">//         this.b = b</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">//     sum() &#123;</span></span><br><span class="line"><span class="comment">//         console.log(this.a + this.b);</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// class Son extends Father &#123; // 可以继承父亲里的属性和方法</span></span><br><span class="line"><span class="comment">//     // 通过子类传给父亲</span></span><br><span class="line"><span class="comment">//     constructor(a, b) &#123;</span></span><br><span class="line"><span class="comment">//         // super(a, b)// super 调用了 父亲传给Father</span></span><br><span class="line"><span class="comment">//         console.log(super.sum());  // 可以调用父方法里的 sum</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// var son = new Son(1, 2)</span></span><br><span class="line"><span class="comment">// var son1 = new Son(5, 2)</span></span><br><span class="line"><span class="comment">// son.sum()</span></span><br><span class="line"><span class="comment">// son1.sum() </span></span><br><span class="line"></span><br><span class="line"><span class="number">3</span>、 子类继承父方法  <span class="variable language_">super</span></span><br><span class="line"> <span class="keyword">class</span> <span class="title class_">Start</span> &#123; </span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">a</span> = a</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">b</span> = b</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">sum</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">a</span> + <span class="variable language_">this</span>.<span class="property">b</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// super 关键字用于访问父函数 或者调用父函数</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Son</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Start</span> &#123; <span class="comment">// 子类继承父类加法方法 同时 扩展减法方法</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>(a, b) <span class="comment">// 必须写在上面 this的前面  利用super 调用父类的构造函数</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">a</span> = a</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">b</span> = b</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">subtract</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">a</span> - <span class="variable language_">this</span>.<span class="property">b</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> son = <span class="keyword">new</span> <span class="title class_">Son</span>(<span class="number">5</span>, <span class="number">2</span>)</span><br><span class="line">son.<span class="title function_">subtract</span>()</span><br><span class="line">son.<span class="title function_">sum</span>()</span><br></pre></td></tr></table></figure>



<h5 id="3、解构赋值应用场景"><a href="#3、解构赋值应用场景" class="headerlink" title="3、解构赋值应用场景"></a>3、解构赋值应用场景</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>es6<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// 取值</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> a = arr[<span class="number">0</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> b = arr[<span class="number">1</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> c = arr[<span class="number">2</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> [a,b,c] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]; </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="number">1.3</span>、含剩余参数的解构赋值</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> [head, ...tail] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">head <span class="comment">// 1</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">tail <span class="comment">// [2, 3, 4]</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// 变量交换</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> a = <span class="number">1</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> b = <span class="number">2</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    [a, b] = [b, a];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// 多个返回值</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span> [<span class="number">1</span>, <span class="number">2</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> a, b;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    [a, b] = <span class="title function_">f</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//返回多个值，只关心想要的</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> a, b;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    [a,,,b] = <span class="title function_">f</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//返回多个值，不知道返回的长度</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> a, b;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    [a,...b] = <span class="title function_">f</span>();</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//对象的解构赋值(key值要一样)</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> o = &#123;<span class="attr">p</span>: <span class="number">2</span>, <span class="attr">q</span>: <span class="literal">true</span>&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> &#123;p, q&#125; = o;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(p, q);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//2 true</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//对象的默认值</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> &#123;a = <span class="number">3</span>, b = <span class="number">5</span>&#125; = &#123;<span class="attr">a</span>: <span class="number">3</span>&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(a, b);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//3 5</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"> </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//json解构,key值必须一样，value可以自己取名</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> metaData = &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">title</span>: <span class="string">&#x27;abc&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">test</span>: [&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">title</span>: <span class="string">&#x27;test&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">desc</span>: <span class="string">&#x27;description&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">let</span> &#123;<span class="attr">title</span>: esTitle, <span class="attr">test</span>: [&#123;<span class="attr">title</span>: cnTitel&#125;]&#125; = metaData;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(esTitle, cnTitel);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">//abc test</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h5 id="4、axios‘请求"><a href="#4、axios‘请求" class="headerlink" title="4、axios‘请求"></a>4、axios‘请求</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="comment">// 请求类型</span></span><br><span class="line">    <span class="attr">method</span>:<span class="string">&#x27;get&#x27;</span>,</span><br><span class="line">    <span class="comment">// url</span></span><br><span class="line">    <span class="attr">URL</span>:<span class="string">&#x27;http//3www.com&#x27;</span>,</span><br><span class="line">    <span class="comment">//设置请求体</span></span><br><span class="line">    <span class="attr">data</span>:&#123;</span><br><span class="line">       <span class="attr">title</span>:<span class="string">&#x27;你好&#x27;</span>,</span><br><span class="line">       <span class="attr">id</span>:<span class="string">&#x27;564656&#x27;</span>,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span>&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="comment">// 数据修改了 更新数据</span></span><br><span class="line">    <span class="attr">method</span>:<span class="string">&#x27;PUT&#x27;</span>,</span><br><span class="line">    <span class="comment">// url</span></span><br><span class="line">    <span class="attr">URL</span>:<span class="string">&#x27;http//3www.com&#x27;</span>,</span><br><span class="line">    <span class="comment">//设置请求体</span></span><br><span class="line">    <span class="attr">data</span>:&#123;</span><br><span class="line">       <span class="attr">title</span>:<span class="string">&#x27;你好&#x27;</span>,</span><br><span class="line">       <span class="attr">id</span>:<span class="string">&#x27;564656&#x27;</span>,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span>&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="comment">// 删除id为3的数据</span></span><br><span class="line">    <span class="attr">method</span>:<span class="string">&#x27;delete&#x27;</span>,</span><br><span class="line">    <span class="comment">// url</span></span><br><span class="line">    <span class="attr">URL</span>:<span class="string">&#x27;http//3www.com/3&#x27;</span>,</span><br><span class="line">    <span class="comment">//设置请求体</span></span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span>&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h1 id="vue3笔记"><a href="#vue3笔记" class="headerlink" title="vue3笔记"></a>vue3笔记</h1><h5 id="1、ref用法-ref的全称-reference"><a href="#1、ref用法-ref的全称-reference" class="headerlink" title="1、ref用法 ref的全称(reference)"></a>1、ref用法 ref的全称(reference)</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">作用定义一个响应式的数据</span><br><span class="line">语法 修改内容 语法</span><br><span class="line"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> name = <span class="title function_">ref</span>(<span class="string">&quot;吊大&quot;</span>);</span><br><span class="line">    <span class="keyword">let</span> obj = <span class="title function_">ref</span>(&#123;</span><br><span class="line">      <span class="attr">a</span>: <span class="string">&quot;DAWDWA&quot;</span>,</span><br><span class="line">      <span class="attr">b</span>: <span class="string">&quot;打完饭&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">edit</span>(<span class="params"></span>) &#123;</span><br><span class="line">      name.<span class="property">value</span> = <span class="string">&quot;你好&quot;</span>;</span><br><span class="line">      obj.<span class="property">value</span>.<span class="property">a</span> = <span class="string">&quot;dadwa&quot;</span>;</span><br><span class="line">       obj.<span class="property">value</span>.<span class="property">b</span> = <span class="string">&quot;ffafwwfa&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      name,</span><br><span class="line">      edit,</span><br><span class="line">      obj,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">ref用来定义基本类型数据</span><br><span class="line">创建了一个包含响应式数据的引用对象</span><br><span class="line">模板中不需要 name.<span class="property">value</span></span><br><span class="line">接受的数据可以是基本数据类型，也可以是对象类型</span><br><span class="line">基本类型的数据：响应式依旧是靠 object.<span class="title function_">defineProperty</span>()的get和set完成的</span><br><span class="line">对象类型的数据：内部求助了vue3中的一个新函数reactive 函数</span><br><span class="line">ref也可以定义对象 或者数组 类型数据 它内部会通过 reactive 转为代理对象</span><br></pre></td></tr></table></figure>

<h5 id="2、reactive-函数"><a href="#2、reactive-函数" class="headerlink" title="2、reactive 函数"></a>2、reactive 函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; ref, reactive &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> name = <span class="title function_">ref</span>(<span class="string">&quot;吊大&quot;</span>);</span><br><span class="line">    <span class="keyword">let</span> obj = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">a</span>: <span class="string">&quot;DAWDWA&quot;</span>,</span><br><span class="line">      <span class="attr">b</span>: <span class="string">&quot;打完饭&quot;</span>,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">edit</span>(<span class="params"></span>) &#123;</span><br><span class="line">      name.<span class="property">value</span> = <span class="string">&quot;你好&quot;</span>;</span><br><span class="line">      obj.<span class="property">a</span> = <span class="string">&quot;dadwa&quot;</span>;</span><br><span class="line">      obj.<span class="property">b</span> = <span class="string">&quot;ffafwwfa&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      name,</span><br><span class="line">      edit,</span><br><span class="line">      obj,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">reactive 函数</span><br><span class="line">  作用： 定义一个对象类型的响应式数据（基本类型不要用它 ， 要用ref函数） 定义数组或者是对象</span><br><span class="line">  语法： 上面代码</span><br><span class="line">  reactive定义的响应式数据是深层次的</span><br><span class="line">  背部基于es的proxy实现，通过代理对象操作源对象内部数据进行操作</span><br><span class="line">  reactive 通过 proxy来实现响应式并通过 reactive 来操作源对象内部的数据</span><br><span class="line">  </span><br></pre></td></tr></table></figure>

<p>3、vue3响应式原理</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">b</span>: <span class="number">2</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// Proxy 可以捕获到对象里的任何一种操作</span></span><br><span class="line"><span class="keyword">const</span> p = <span class="keyword">new</span> <span class="title class_">Proxy</span>(obj, &#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params">target, propName</span>) &#123;</span><br><span class="line">        <span class="comment">// target 你传入的是谁target就是谁</span></span><br><span class="line">        <span class="comment">// propName 你读取的是谁 propName 就要是谁哦</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;调用get了&#x27;</span>);</span><br><span class="line">        <span class="keyword">return</span> target[propName]</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">set</span>(<span class="params">target, propName, value</span>) &#123;</span><br><span class="line">        <span class="comment">// value 修改后的数据</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(value);</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;调用set了&#x27;</span>);</span><br><span class="line">        target[propName] = value</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">deleteProperty</span>(<span class="params">target, propName,</span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;调用deleteProperty了&#x27;</span>);</span><br><span class="line">        <span class="keyword">delete</span> target[propName]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h5 id="4、vue3-setup函数setup的两个注意点"><a href="#4、vue3-setup函数setup的两个注意点" class="headerlink" title="4、vue3-setup函数setup的两个注意点"></a>4、vue3-setup函数setup的两个注意点</h5><p>setup执行的时机</p>
<p>​     在beforeCreate之前执行一次，this是undifined</p>
<p>setup的参数</p>
<p>​      props：值为对象，包含：组件外部传过来的值且组件内部声明接收了的属性</p>
<p>​      context：上下文对象 </p>
<p>​        attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声名的属性，相当于this.$attrs</p>
<p>​       slots:收到的插槽内容，相当于this.$slots</p>
<p>​       emit:分发自定义事件的函数，相当于this.$emit</p>
<p>​       emits  使用  触发自定义事件组件有警告加上这个</p>
<p>1、  setup  有两个参数第一个是 props  就是父组件组件传过来的数据</p>
<p>2、  context   是一个对象有emit</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="attr">flag</span>: <span class="title class_">Boolean</span>,</span><br><span class="line">    <span class="attr">num</span>: <span class="title class_">Number</span>,</span><br><span class="line">    <span class="attr">subtotal</span>: <span class="title class_">Number</span>,</span><br><span class="line">    <span class="attr">flagTap</span>: <span class="title class_">Boolean</span>,</span><br><span class="line">    <span class="attr">trueLength</span>: <span class="title class_">Number</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">emits</span>: [<span class="string">&quot;checkALL&quot;</span>, <span class="string">&quot;removecheck&quot;</span>], <span class="comment">// 使用emits触发自定义事件有警告加上这个</span></span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(props);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(context);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">checkBtn</span>(<span class="params"></span>) &#123;  <span class="comment">// context.emit 调用函数</span></span><br><span class="line">      context.<span class="title function_">emit</span>(<span class="string">&quot;checkALL&quot;</span>, event.<span class="property">target</span>.<span class="property">checked</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">removecheck</span>(<span class="params"></span>) &#123;</span><br><span class="line">      context.<span class="title function_">emit</span>(<span class="string">&quot;removecheck&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      checkBtn,</span><br><span class="line">      removecheck,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>



<h5 id="5、computed-计算属性"><a href="#5、computed-计算属性" class="headerlink" title="5、computed 计算属性"></a>5、computed 计算属性</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; computed &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> obj = <span class="title function_">computed</span>(<span class="function">() =&gt;</span> store.<span class="property">state</span>.<span class="property">obj</span>);</span><br><span class="line">       <span class="keyword">let</span> obj2 = <span class="title function_">computed</span>(<span class="function">() =&gt;</span> &#123; <span class="comment">// 完整版的写法 考虑读和写</span></span><br><span class="line">          <span class="title function_">get</span>(<span class="params"></span>)&#123; <span class="comment">// 有人读取get调用</span></span><br><span class="line">   </span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="title function_">set</span>(<span class="params">value</span>)&#123; <span class="comment">// 有人修改set调用</span></span><br><span class="line">        </span><br><span class="line">        &#125;</span><br><span class="line">   &#125;);</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      obj</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h5 id="6、vue3里的watch监听"><a href="#6、vue3里的watch监听" class="headerlink" title="6、vue3里的watch监听"></a>6、vue3里的watch监听</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">watch </span><br><span class="line">watch监视 ref不用加value</span><br><span class="line">    ()=&gt;obj,</span><br><span class="line">      <span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(data);</span><br><span class="line">        store.<span class="title function_">commit</span>(<span class="string">&quot;editList&quot;</span>, data);</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">deep</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">immediate</span>: <span class="literal">true</span>,</span><br><span class="line">      &#125;</span><br><span class="line">    );</span><br><span class="line">    </span><br><span class="line">     监视多个</span><br><span class="line">     <span class="title function_">watch</span>(</span><br><span class="line">      [<span class="function">()=&gt;</span>a,<span class="function">()=&gt;</span>b],</span><br><span class="line">      <span class="function">(<span class="params">a,b</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(a,b);</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">deep</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">immediate</span>: <span class="literal">true</span>,</span><br><span class="line">      &#125;</span><br><span class="line">    );</span><br></pre></td></tr></table></figure>

<h5 id="7、watchEffect监视函数"><a href="#7、watchEffect监视函数" class="headerlink" title="7、watchEffect监视函数"></a>7、watchEffect监视函数</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; watchEffect &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 最大的特点不会指定监视谁</span></span><br><span class="line">  <span class="keyword">const</span> x = num.<span class="property">value</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;触发了watchEffect&quot;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">watch 的套路是 ：是要指明监视的属性，也要指明监视的函数</span><br><span class="line">watchEffect 的套路是不用指明要监视的属性，监视的回调中用到那个属性，那就监视那个属性</span><br><span class="line">watchEffect 有点像computed </span><br><span class="line">      computed注重计算出来的值、所以必须写返回值</span><br><span class="line">      watchEffect 跟注重的是过程，所以不用写返回值</span><br></pre></td></tr></table></figure>

<h5 id="8、自定义hook函数"><a href="#8、自定义hook函数" class="headerlink" title="8、自定义hook函数"></a>8、自定义hook函数</h5><p>   什么是hook 本质上是一个函数，把setup函数中的Composition Api 进行了封装</p>
<p>   类似于vue2中mixin    自定义hook的优势服复用代码 让setup中的逻辑更加清晰</p>
<h5 id="9、-toRefs"><a href="#9、-toRefs" class="headerlink" title="9、 toRefs"></a>9、 toRefs</h5><p>作用：创建一个ref对象、使其value值指向另一个对象中的某个属性</p>
<p>应用：要将响应式对象中的属性单独提供给外部使用</p>
<p>扩展：toref与torefs的功能一至、但可以批量创建多个ref对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">inport &#123; toRefs ,reactive&#125; <span class="keyword">from</span> ‘vue’</span><br><span class="line"><span class="title function_">setup</span>(<span class="params"></span>)&#123;</span><br><span class="line"><span class="keyword">let</span>  obj = reactive&#123;</span><br><span class="line">   <span class="keyword">let</span> a = <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> &#123;</span><br><span class="line">...<span class="title function_">toRefs</span>(obj)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#125; <span class="comment">// 获取数据的时候直接 &#123;&#123;a&#125;&#125;  就行  不用 &#123;&#123;obj.a&#125;&#125;了</span></span><br></pre></td></tr></table></figure>



<h5 id="10、-shallowRef-shallowReactive"><a href="#10、-shallowRef-shallowReactive" class="headerlink" title="10、 shallowRef   shallowReactive"></a>10、 shallowRef   shallowReactive</h5><p>shallow 单词就是浅的意思</p>
<p>shallowRef   只可以让基本数据类型的数据变成响应式 ，不会去处理对象类型的数据</p>
<p>shallowReactive 只考虑最外层的数据，    浅响应式数据</p>
<ul>
<li><p>​     什么时候用如果数据比较深,  但是只想变化外层的数据  &#x3D;&#x3D;&gt;shollowReactive</p>
</li>
<li><p>​     若果有一个对像数据、后续功能不会再修改该对象的属性，而是生成新的对象来替换  &#x3D;&#x3D;&gt;shallowRef</p>
</li>
<li><p>​      使用直接引入然后    let   obj &#x3D;shallowReactive()</p>
</li>
</ul>
<h5 id="11、readonly-shollowReadonly"><a href="#11、readonly-shollowReadonly" class="headerlink" title="11、readonly  shollowReadonly"></a>11、readonly  shollowReadonly</h5><p>readonly  让数据只能变成可读的 （深读）</p>
<p>shollowReadonly 让数据只能变成可读的 （浅读）</p>
<p>应用场景：希望数据只能读不能改</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">     <span class="attr">a</span>:<span class="number">0</span></span><br><span class="line">&#125;)</span><br><span class="line">obj = <span class="title function_">readonly</span>(obj)</span><br><span class="line"><span class="comment">// 这个obj 数据不是你的组件定义的   你可以用数据但不能改</span></span><br></pre></td></tr></table></figure>

<h5 id="12、toRaw-markRaw"><a href="#12、toRaw-markRaw" class="headerlink" title="12、toRaw  markRaw"></a>12、toRaw  markRaw</h5><p>toRaw</p>
<p> 让一个Ractive生成的响应式对象变成普通对象</p>
<p>使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作不会引起页面更新</p>
<p>markRaw</p>
<p> 作用：标记一个对象，使其永远不会变成响应式对象</p>
<p> 应用场景</p>
<ul>
<li>​        有些值不应该改设置为响应式，列入第三方动画库等</li>
<li>​        当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能</li>
</ul>
<p>​       </p>
<h5 id="13、-provide-inject-vue3祖孙-后代传值"><a href="#13、-provide-inject-vue3祖孙-后代传值" class="headerlink" title="13、 provide  inject vue3祖孙 ,后代传值"></a>13、 provide  inject vue3祖孙 ,后代传值</h5><p>父组件有一个provide  选项来提供数据  后代组件有一个inject选项来开始使用这些数据</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; inject  , provide，reactive &#125;  <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="comment">//  父 </span></span><br><span class="line">setup&#123;</span><br><span class="line">   <span class="keyword">let</span> obj = <span class="title function_">provide</span>(<span class="string">&#x27;car&#x27;</span>)</span><br><span class="line">   <span class="title function_">provide</span>(<span class="string">&#x27;car&#x27;</span>,obj)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 子</span></span><br><span class="line">setup&#123;</span><br><span class="line">   <span class="keyword">let</span> x = <span class="title function_">inject</span>(<span class="string">&#x27;car&#x27;</span>)</span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(x)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="14、optionsApi、compositionApi-存在的问题"><a href="#14、optionsApi、compositionApi-存在的问题" class="headerlink" title="14、optionsApi、compositionApi 存在的问题"></a>14、optionsApi、compositionApi 存在的问题</h5><p>optionsApi  使用传统api中，新增一个需求，要在data，methods，computed中修改</p>
<p>compositionApi  我们可以更加优雅的组织我们的代码，函数，让我们的代码更加有序的组合在一起</p>
<h5 id="15、teleport-标签可以传送dom"><a href="#15、teleport-标签可以传送dom" class="headerlink" title="15、teleport 标签可以传送dom"></a>15、teleport 标签可以传送dom</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;teleport  to=<span class="string">&quot;&quot;</span>&gt;   &lt;<span class="regexp">/teleport&gt;    /</span><span class="regexp">/  台历跑儿 to里面写 是传送的div</span></span><br></pre></td></tr></table></figure>

<h5 id="16、defineAsyncComponent、Suspense"><a href="#16、defineAsyncComponent、Suspense" class="headerlink" title="16、defineAsyncComponent、Suspense"></a>16、defineAsyncComponent、Suspense</h5><p>Suspense  等待的时候可以渲染一些额内容、用户更好体验</p>
<p>Suspense  包裹好组件  配置好 default  和  fallback</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">Suspense</span>&gt;</span> </span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:default</span>&gt;</span><span class="tag">&lt;<span class="name">Home1</span>&gt;</span><span class="tag">&lt;/<span class="name">Home1</span>&gt;</span> <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:fallback</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        加载中...</span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">Suspense</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; defineAsyncComponent &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&quot;./views/Home&quot;</span>; <span class="comment">// 静态引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// 如果是静态引入 全部加载完的时候dom是一下子就出来了</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">let</span> <span class="title class_">Home1</span> = <span class="title function_">defineAsyncComponent</span>(<span class="function">() =&gt;</span> <span class="title function_">import</span>(<span class="string">&quot;./views/Home.vue&quot;</span>)); <span class="comment">// 异步引入</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// 先会先渲染执行加载好的dom</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">data</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">mounted</span>(<span class="params"></span>) &#123;&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">methods</span>: &#123;&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title class_">Home</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title class_">Home1</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h5 id="17、vue3自定义指令"><a href="#17、vue3自定义指令" class="headerlink" title="17、vue3自定义指令"></a>17、vue3自定义指令</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">通常情况下，如果你需要对<span class="variable constant_">DOM</span>元素进行底层操作，这个时候就需要使用到自定义指令。在vue3中我们可以自定义局部指令和全局指令，接下来让我们来自定义一个v-focus自动获取焦点的指令吧。</span><br><span class="line"></span><br><span class="line"><span class="number">1.</span>局部指令</span><br><span class="line"></span><br><span class="line">局部指令只能在当前组件使用。那么怎么定义局部指令呢？我们在directives选项中命名一个名为focus的指令，focus中有很多生命周期(created, bdforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted)，在mounted钩子中有<span class="number">4</span>个参数，通过el.<span class="title function_">focus</span>()获取到焦点。代码如下：</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">directives</span>: &#123;</span><br><span class="line">    <span class="attr">focus</span>: &#123;</span><br><span class="line">      <span class="title function_">mounted</span>(<span class="params">el, bindings, vnode, preVnode</span>) &#123;</span><br><span class="line">        el.<span class="title function_">focus</span>()</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">复制代码</span><br><span class="line">这样，我们只需在input标签中加上v-focus就可以在挂载时自动获取焦点啦。代码如下：</span><br><span class="line"></span><br><span class="line">&lt;input type=<span class="string">&quot;text&quot;</span> v-focus /&gt;</span><br><span class="line">复制代码</span><br><span class="line"><span class="number">2.</span>全局指令</span><br><span class="line"></span><br><span class="line">如果想要定义全局指令，那么在vue的main.<span class="property">js</span>函数中，我们要通过<span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)来创建实例，再通过app.<span class="title function_">directive</span>() 来自定义指令，app.<span class="title function_">directive</span>(<span class="string">&#x27;name&#x27;</span>,&#123; &#125;)跟两个参数，第一个是指令名称，第二个是相关操作。示例代码如下：</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./03.自定义指令/App.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line">app.<span class="title function_">directive</span>(<span class="string">&#x27;focus&#x27;</span>, &#123;</span><br><span class="line">  <span class="title function_">mounted</span>(<span class="params">el, bindings, vnode, preVnode</span>) &#123;</span><br><span class="line">    el.<span class="title function_">focus</span>()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line">app.<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line">复制代码</span><br><span class="line">这样我们就可以在任意组件使用v-focus指令来获取焦点了。</span><br></pre></td></tr></table></figure>

<hr>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">Author: </span><span class="post-copyright-info"><a href="https://szhihao.gitee.io">孙志豪</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">Link: </span><span class="post-copyright-info"><a href="https://szhihao.gitee.io/2022/10/11/14-%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%EF%BC%88Vue%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/VUE%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%9A%84%E5%89%AF%E6%9C%AC/">https://szhihao.gitee.io/2022/10/11/14-%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%EF%BC%88Vue%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/VUE%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%9A%84%E5%89%AF%E6%9C%AC/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">Copyright Notice: </span><span class="post-copyright-info">All articles in this blog are licensed under <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> unless stating additionally.</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="/img/%E5%A4%A9%E7%A9%BA.jpeg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2022/10/11/03-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%A0%B8%E5%BF%83%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89/web%E9%AB%98%E7%BA%A7%E9%9D%A2%E8%AF%95/"><img class="prev-cover" src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">Previous Post</div><div class="prev_info">web高级面试问题</div></div></a></div><div class="next-post pull-right"><a href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/1.5%E4%B8%87%E5%AD%97%E6%A6%82%E6%8B%ACES6%E5%85%A8%E9%83%A8%E7%89%B9%E6%80%A7(%E5%B7%B2%E6%9B%B4%E6%96%B0ES2020)/"><img class="next-cover" src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">Next Post</div><div class="next_info">1.5万字概括ES6全部特性(已更新ES2020)</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="/img/%E5%A4%B4%E5%83%8F.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">孙志豪</div><div class="author-info__description">吾日三省吾身：为人谋而不忠乎？与朋友交而不信乎？传不习乎？</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">44</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">15</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/szhihao/szhihao"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/szhihao/szhihao" target="_blank" title="Gitee"><i class="fab fa-github"></i></a><a class="social-icon" href="https://blog.csdn.net/qq_54753561" target="_blank" title="CSDN"><i class="fa fa-book-open"></i></a><a class="social-icon" href="mailto:zhihaomail@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>Catalog</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Welcome-to-vue"><span class="toc-number">1.</span> <span class="toc-text">*Welcome to *vue</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#0-1-vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">1.0.0.0.1.</span> <span class="toc-text">0.1.vue生命周期</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1%E3%80%81%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82"><span class="toc-number">1.0.0.0.2.</span> <span class="toc-text">1、组件传参</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2%E3%80%81watch-%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8"><span class="toc-number">1.0.0.0.3.</span> <span class="toc-text">2、watch  本地存储</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4%E3%80%81%E5%85%A8%E5%B1%80%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF"><span class="toc-number">1.0.0.0.4.</span> <span class="toc-text">4、全局事件总线</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5%E3%80%81%E6%B6%88%E6%81%AF%E8%AE%A2%E9%98%85%E4%B8%8E%E5%8F%91%E5%B8%83"><span class="toc-number">1.0.0.0.5.</span> <span class="toc-text">5、消息订阅与发布</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6%E3%80%81nextTick"><span class="toc-number">1.0.0.0.6.</span> <span class="toc-text">6、nextTick</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7%E3%80%81VUEX"><span class="toc-number">1.0.0.0.7.</span> <span class="toc-text">7、VUEX</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7%E3%80%81mapGetters%E3%80%81mapState%E3%80%81mapMutations%E3%80%81mapActions"><span class="toc-number">1.0.0.0.8.</span> <span class="toc-text">7、mapGetters、mapState、mapMutations、mapActions</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#8%E3%80%81%E8%B7%AF%E7%94%B1%E5%92%8C%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA"><span class="toc-number">1.0.0.0.9.</span> <span class="toc-text">8、路由和编程式导航</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9%E3%80%81%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82%EF%BC%8Cquery%E3%80%81params"><span class="toc-number">1.0.0.0.10.</span> <span class="toc-text">9、路由传参，query、params</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10%E3%80%81%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB"><span class="toc-number">1.0.0.0.11.</span> <span class="toc-text">10、路由守卫</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#11%E3%80%81filter%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-number">1.0.0.0.12.</span> <span class="toc-text">11、filter过滤器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12%E3%80%81%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><span class="toc-number">1.0.0.0.13.</span> <span class="toc-text">12、自定义指令</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13%E3%80%81mixin%E6%B7%B7%E5%85%A5"><span class="toc-number">1.0.0.0.14.</span> <span class="toc-text">13、mixin混入</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#14%E3%80%81%E6%8F%92%E6%A7%BD"><span class="toc-number">1.0.0.0.15.</span> <span class="toc-text">14、插槽</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1%E3%80%81%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93"><span class="toc-number">1.1.</span> <span class="toc-text">1、数组方法总结</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2%E3%80%81%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.1.0.0.1.</span> <span class="toc-text">2、面向对象</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3%E3%80%81%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">1.1.0.0.2.</span> <span class="toc-text">3、解构赋值应用场景</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4%E3%80%81axios%E2%80%98%E8%AF%B7%E6%B1%82"><span class="toc-number">1.1.0.0.3.</span> <span class="toc-text">4、axios‘请求</span></a></li></ol></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#vue3%E7%AC%94%E8%AE%B0"><span class="toc-number">2.</span> <span class="toc-text">vue3笔记</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1%E3%80%81ref%E7%94%A8%E6%B3%95-ref%E7%9A%84%E5%85%A8%E7%A7%B0-reference"><span class="toc-number">2.0.0.0.1.</span> <span class="toc-text">1、ref用法 ref的全称(reference)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2%E3%80%81reactive-%E5%87%BD%E6%95%B0"><span class="toc-number">2.0.0.0.2.</span> <span class="toc-text">2、reactive 函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4%E3%80%81vue3-setup%E5%87%BD%E6%95%B0setup%E7%9A%84%E4%B8%A4%E4%B8%AA%E6%B3%A8%E6%84%8F%E7%82%B9"><span class="toc-number">2.0.0.0.3.</span> <span class="toc-text">4、vue3-setup函数setup的两个注意点</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5%E3%80%81computed-%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7"><span class="toc-number">2.0.0.0.4.</span> <span class="toc-text">5、computed 计算属性</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6%E3%80%81vue3%E9%87%8C%E7%9A%84watch%E7%9B%91%E5%90%AC"><span class="toc-number">2.0.0.0.5.</span> <span class="toc-text">6、vue3里的watch监听</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7%E3%80%81watchEffect%E7%9B%91%E8%A7%86%E5%87%BD%E6%95%B0"><span class="toc-number">2.0.0.0.6.</span> <span class="toc-text">7、watchEffect监视函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#8%E3%80%81%E8%87%AA%E5%AE%9A%E4%B9%89hook%E5%87%BD%E6%95%B0"><span class="toc-number">2.0.0.0.7.</span> <span class="toc-text">8、自定义hook函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#9%E3%80%81-toRefs"><span class="toc-number">2.0.0.0.8.</span> <span class="toc-text">9、 toRefs</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#10%E3%80%81-shallowRef-shallowReactive"><span class="toc-number">2.0.0.0.9.</span> <span class="toc-text">10、 shallowRef   shallowReactive</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#11%E3%80%81readonly-shollowReadonly"><span class="toc-number">2.0.0.0.10.</span> <span class="toc-text">11、readonly  shollowReadonly</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#12%E3%80%81toRaw-markRaw"><span class="toc-number">2.0.0.0.11.</span> <span class="toc-text">12、toRaw  markRaw</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#13%E3%80%81-provide-inject-vue3%E7%A5%96%E5%AD%99-%E5%90%8E%E4%BB%A3%E4%BC%A0%E5%80%BC"><span class="toc-number">2.0.0.0.12.</span> <span class="toc-text">13、 provide  inject vue3祖孙 ,后代传值</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#14%E3%80%81optionsApi%E3%80%81compositionApi-%E5%AD%98%E5%9C%A8%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">2.0.0.0.13.</span> <span class="toc-text">14、optionsApi、compositionApi 存在的问题</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#15%E3%80%81teleport-%E6%A0%87%E7%AD%BE%E5%8F%AF%E4%BB%A5%E4%BC%A0%E9%80%81dom"><span class="toc-number">2.0.0.0.14.</span> <span class="toc-text">15、teleport 标签可以传送dom</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#16%E3%80%81defineAsyncComponent%E3%80%81Suspense"><span class="toc-number">2.0.0.0.15.</span> <span class="toc-text">16、defineAsyncComponent、Suspense</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#17%E3%80%81vue3%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4"><span class="toc-number">2.0.0.0.16.</span> <span class="toc-text">17、vue3自定义指令</span></a></li></ol></li></ol></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2022/10/12/04-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87%EF%BC%89/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87/" title="性能优化面试题"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="性能优化面试题"/></a><div class="content"><a class="title" href="/2022/10/12/04-%E5%89%8D%E7%AB%AF%EF%BC%88%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87%EF%BC%89/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AF%87/" title="性能优化面试题">性能优化面试题</a><time datetime="2022-10-12T12:01:36.000Z" title="Created 2022-10-12 20:01:36">2022-10-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS字符串方法"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS字符串方法"/></a><div class="content"><a class="title" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS字符串方法">JS字符串方法</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS对象方法"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS对象方法"/></a><div class="content"><a class="title" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E8%AE%B0%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS对象方法">JS对象方法</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E6%9F%A5%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS数组方法"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS数组方法"/></a><div class="content"><a class="title" href="/2022/10/11/05-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%96%B9%E6%B3%95%E5%AE%B6%E8%A7%84%EF%BC%89/JS%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95%E2%80%94%E2%80%94%E9%80%9F%E6%9F%A5%E5%B0%8F%E6%9C%AC%E5%AD%90/" title="JS数组方法">JS数组方法</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2022/10/11/07-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%89%8B%E5%86%99%E7%AF%87%EF%BC%89/%E5%BC%80%E5%8F%91%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0/" title="开发封装函数"><img src= "" data-lazy-src="/img/%E5%A4%A9%E7%A9%BA.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="开发封装函数"/></a><div class="content"><a class="title" href="/2022/10/11/07-%E6%A0%B8%E5%BF%83js%EF%BC%88%E6%89%8B%E5%86%99%E7%AF%87%EF%BC%89/%E5%BC%80%E5%8F%91%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0/" title="开发封装函数">开发封装函数</a><time datetime="2022-10-11T12:01:36.000Z" title="Created 2022-10-11 20:01:36">2022-10-11</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2022 By 孙志豪</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="Read Mode"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="Table Of Contents"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="Back To Top"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">Search</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  Loading the Database</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="Search for Posts" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>